import Vue from 'vue'
import App from './App.vue'
import Vuex from './vuex/index.js'
// import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 1,
    a: {}
  },
  getters: {
    count(state) {
      console.log('root-getters-count')
      return state.count + 1
    },
    'a/count'() {
      return 'hehe'
    }
  },
  mutations: {
    addCount(state, payload) {
      console.log('root-mutations-addCount')
      state.count += payload
    } 
  },
  actions: {
    addCount(ctx, payload) {
      console.log('root-actions-addCount')
      this.commit('addCount', payload)
    }
  },
  modules: {
    a: {
      namespaced: true,
      state: {
        count: 2
      },
      getters: {
        count(state) {
          console.log('a-getters-count')
          return state.count + 2
        }
      },
      mutations: {
        addCount(state, payload) {
          console.log('a-mutations-addCount')
          state.count += payload
        } 
      },
      actions: {
        addCount(ctx, payload) {
          console.log('a-actions-addCount')
          ctx.commit('addCount', payload)
        }
      },
    },
    b: {
      state: {
        count: 3
      },
      getters: {
        count(state) {
          console.log('b-getters-count')
          return state.count + 3
        }
      },
      mutations: {
        addCount(state, payload) {
          console.log('b-mutations-addCount')
          state.count += payload
        } 
      },
      actions: {
        addCount(ctx, payload) {
          console.log('b-actions-addCount')
          ctx.commit('addCount', payload)
        }
      },
    }
  }
})


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')
